<template>
  <div class="bottom">
    <div
      class="item water"
      @mouseover="water"
      @click="water_click"
      v-show="flag3"
    >
      <img :src="require(`../../assets/tfxq/imgs/水-${currentPath === '/water' ? 'h': 'n'}.png`)" alt="图片加载错误！" />
      <div :class="currentPath == '/water' ? 'text2' : 'text'">水生态</div>
    </div>
    <div class="item gas" @mouseover="gas" v-show="flag">
      <img :src="require(`../../assets/tfxq/imgs/大气-${currentPath === '/gas' ? 'h': 'n'}.png`)" alt="图片加载错误" @click="gas_click" />
      <div :class="currentPath == '/gas' ? 'text2' : 'text'">大气生态</div>
    </div>

    <div
      class="item forest"
      @mouseover.stop="forest"
      @click="forest_click"
      v-show="flag2"
    >
      <img :src="require(`../../assets/tfxq/imgs/森林-${currentPath === '/forest' ? 'h': 'n'}.png`)" alt="图片加载错误！" />
      <div :class="currentPath == '/forest' ? 'text2' : 'text'">
        森林生态防火
      </div>
    </div>

    <div
      class="item wellLid"
      @mouseover="wellLid"
      @click="welllid_click"
      v-show="flag4"
    >
      <img :src="require(`../../assets/tfxq/imgs/井盖-${currentPath === '/wellLid' ? 'h': 'n'}.png`)" alt="图片加载错误！" />
      <div :class="currentPath == '/wellLid' ? 'text2' : 'text'">智能井盖</div>
    </div>
  </div>
</template>

<script>
import _ from 'lodash'

export default {
  name: "Bottom",
  data() {
    return {
      id: {},
      flag: false,
      flag2: false,
      flag3: false,
      flag4: false,
      userQx: this.$store.state.userQx,
      timestamp: "",
      Encrypteddata: "",
      text: "text",
      text2: "text2",
      // currentPath: "",
      accountId: this.$store.state.loginUserInfi.accountId,
      // images: [
      //   require("../../assets/tfxq/imgs/水-n.png"),
      //   require("../../assets/tfxq/imgs/大气-n.png"),
      //   require("../../assets/tfxq/imgs/森林-n.png"),
      //   require("../../assets/tfxq/imgs/井盖-n.png"),
      // ],
    };
  },
  computed: {
    currentPath() {
      return this.$route.path;
    },
    water () {
      return _.debounce(() => this.$router.push('/water'), 1000, { leading: true, trailing: true })
    },
    gas () {
      return _.debounce(() => this.$router.push('/gas'), 1000, { leading: true, trailing: true })
    },
    forest () {
      return _.debounce(() => this.$router.push('/forest'), 1000, { leading: true, trailing: true })
    },
    wellLid () {
      return _.debounce(() => this.$router.push('/wellLid'), 1000, { leading: true, trailing: true })
    }
  },
  mounted() {
    this.userQx.map((item) => {
      if (item.permissionname == "访问大气生态业务系统") {
        this.flag = true;
      } else if (item.permissionname == "访问森林生态防火业务系统") {
        this.flag2 = true;
      } else if (item.permissionname == "访问水生态业务系统") {
        this.flag3 = true;
      } else if (item.permissionname == "访问智能井盖业务系统") {
        this.flag4 = true;
      }
    });
  },
  created() {
    // this.getPath();
  },
  methods: {
    async time() {
      var host = window.location.host;
      var url;
      if (process.env.NODE_ENV === "production") {
        if (host == "10.31.215.133:44308") {
          url = "http://10.31.215.133:44308/Home/TestTS"; //内网
        } else {
          url = "http://10.46.81.26:44308/Home/TestTS"; //外网
        }
      } else {
        // 开发环境
        url = "http://36.111.191.34:44309/Home/TestTS";
      }
      var that = this;
      await that.$axios.get(url).then(function (res) {
        that.timestamp = res.data.OriginalData;
        that.Encrypteddata = res.data.Encrypteddata;
      });
    },
    // 气
    // gas() {
    //   this.$router.push("/gas");
    // },
    async gas_click() {
      var host = window.location.host;
      var url_gas = "";
      if (process.env.NODE_ENV === "production") {
        if (host == "10.31.215.133:44308") {
          url_gas = "http://10.31.215.42"; //内网
        } else {
          url_gas = "http://10.46.81.26:10081"; //外网
        }
      } else {
        url_gas = "http://139.159.217.14:8081"; //开发
      }
      await this.time();
      let url =
        url_gas +
        `/airEcology/api/sso/checkRedirect?accountId=${this.accountId}&OriginalData=${this.timestamp}&Encrypteddata=${this.Encrypteddata}`;
      window.open(url, "_blank");
    },
    // 水
    // water() {
    //   this.$router.push("/water");
    // },
    async water_click() {
      var host = window.location.host;
      var url_water;
      if (process.env.NODE_ENV === "production") {
        if (host == "10.31.215.133:44308") {
          url_water = "http://10.31.215.64:9998"; //内网
        } else {
          url_water = "http://10.46.81.26:19998"; //外网
        }
      } else {
        url_water = "http://139.155.25.17:9998"; //开发
      }
      await this.time();
      let url =
        url_water +
        `/oneMap?accountId=${this.accountId}&OriginalData=${this.timestamp}&Encrypteddata=${this.Encrypteddata}`;
      window.open(url, "_blank");
    },
    // 森林
    // forest() {
    //   this.$router.push("/forest");
    // },
    async forest_click() {
      var host = window.location.host;
      var url_forest;
      if (process.env.NODE_ENV === "production") {
        if (host == "10.31.215.133:44308") {
          url_forest = "http://10.31.215.101:8779/tf/#/a-picture"; //内网
        } else {
          url_forest = "http://10.46.81.26:8779/tf/#/a-picture"; //外网
        }
      } else {
        url_forest =
          "https://61.128.194.224:8333/tf/#/predict-alert/phenological"; //开发
      }
      await this.time();
      let url =
        url_forest +
        `?accountId=${this.accountId}&OriginalData=${this.timestamp}&Encrypteddata=${this.Encrypteddata}`;
      window.open(url, "_blank");
    },
    // 井盖
    // wellLid() {
    //   this.$router.push("/wellLid");
    // },
    async welllid_click() {
      var host = window.location.host;
      var url_well;
      if (process.env.NODE_ENV === "production") {
        if (host == "10.31.215.133:44308") {
          url_well = "http://10.31.215.42:8111"; //政务内网
        } else {
          url_well = "http://10.46.81.26:8111"; //政务外网
        }
      } else {
        url_well = "http://114.117.196.141:1111"; // 开发
      }
      await this.time();
      let url =
        url_well +
        `/?accountId=${this.accountId}&OriginalData=${this.timestamp}&Encrypteddata=${this.Encrypteddata}`;
      window.open(url, "_blank");
    },
    // 获取当前路由
    // getPath() {
    //   let router_path = this.$route.path;
    //   if (router_path == "/gas") {
    //     this.images[0] = `${require("../../assets/tfxq/imgs/大气-h.png")}`;
    //   } else if (router_path == "/water") {
    //     this.images[1] = `${require("../../assets/tfxq/imgs/水-h.png")}`;
    //   } else if (router_path == "/forest") {
    //     this.images[2] = `${require("../../assets/tfxq/imgs/森林-h.png")}`;
    //   } else {
    //     this.images[3] = `${require("../../assets/tfxq/imgs/井盖-h.png")}`;
    //   }
      // let currentPath = window.location.href.slice(23);
      // this.currentPath = currentPath;
    // },
  },
};
</script>

<style lang="less" scoped>
.bottom {
  width: 30%;
  height: 10%;
  position: absolute;
  bottom: 0;
  left: 35%;
  z-index: 0;
  display: flex;
  justify-content: space-around;
}

.bottom .item {
  width: 1.25rem;
  height: 100%;
  text-align: center;
  font-size: 0.175rem;
  overflow: hidden;
  cursor: pointer;
}

.bottom .item img {
  margin-top: 0.075rem;
  width: 34%;
}

.text {
  margin-top: 0.05rem;
  color: rgba(156, 219, 251);
}

.text2 {
  margin-top: 0.05rem;
  color: rgb(77, 224, 166);
}
</style>
